<mat-form-field>
    <mat-select placeholder="國家">
        <mat-option [value]="1">
            年
        </mat-option>
        <mat-option [value]="2">
            季
        </mat-option>
        <mat-option [value]="3">
            月
        </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field>
    <mat-select placeholder="種類">
        <mat-option [value]="1">
            年
        </mat-option>
        <mat-option [value]="2">
            季
        </mat-option>
        <mat-option [value]="3">
            月
        </mat-option>
    </mat-select>
</mat-form-field>

<mat-form-field>
    <mat-select placeholder="週期">
        <mat-option [value]="1">
            年
        </mat-option>
        <mat-option [value]="2">
            季
        </mat-option>
        <mat-option [value]="3">
            月
        </mat-option>
    </mat-select>
</mat-form-field>

<div>
    <div style="width: 500px;position: relative; display: inline-block;" ngResizable ngDraggable rzHandles="all" (rzResizing)="onResizing($event)">
        <div id="container1" style="min-width: 310px; height: 100%;width: 100%; margin: 0 auto">
        </div>
    </div>
    <div style="width: 500px;position: relative; display: inline-block;" ngResizable ngDraggable rzHandles="all" (rzResizing)="onResizing($event)">
        <div id="container2" style="min-width: 310px; height: 100%;width: 100%; margin: 0 auto">
        </div>
    </div>
    <div style="width: 500px;position: relative; display: inline-block;" ngResizable ngDraggable rzHandles="all" (rzResizing)="onResizing($event)">
        <div id="container3" style="min-width: 310px; height: 100%;width: 100%; margin: 0 auto;">
        </div>
    </div>
    <div style="width: 500px;position: relative; display: inline-block;" ngResizable ngDraggable rzHandles="all" (rzResizing)="onResizing($event)">
        <div id="container4" style="min-width: 310px; height: 100%;width: 100%; margin: 0 auto">
        </div>
    </div>
</div>